<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="app/css/works.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>计算机科技协会</title>
    <meta name="Resource-type" content="Document"/>

    <link rel="stylesheet" type="text/css" href="./css/jquery.fullPage.css"/>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/home.css">

    <!--[if IE]>
    <script type="text/javascript">
        var console = {
            log: function () {
            }
        };
    </script>
    <![endif]-->
    <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.fullPage.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fullpage').fullpage({
                sectionsColor: ['#1bbc9b', '#ffffff', '#7BAABE', '#a1a0a0'],
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
                'navigation': true,
                'navigationPosition': 'right',
                'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
                menu: '#menu',
                //equivalent to jQuery `easeOutBack` extracted from http://matthewlein.com/ceaser/
                easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
            });
        });
    </script>

</head>
<body>
<div id="fullpage">
    <div class="section " id="section0">
        <div class="header">
            <div class="head_content">
                <div class="head_logo">
                    <img src="img/logo_03.png">
                </div>
                <!--导航栏-->
                <nav class="head_navbar">
                    <ul id="main">
                        <li><a href="../home/home.html">首页</a></li>
                        <li>
                            <a>社团</a>
                            <ul class="drop">
                                <div>
                                    <li><a href="../PO/cj.html">程序设计基础协会</a></li>
                                    <li><a href="../ACM/acm.html">ACM协会</a></li>
                                    <li><a href="../UO/bgs.html">不甘社</a></li>
                                    <li><a href="../WD/wkf.html">微开发</a></li>
                                </div>
                            </ul>

                        </li>
                        <li><a href="../production/production.html">作品</a></li>
                        <li><a href="../news/news_up.html">新闻</a></li>
                        <li><a href="../about/about.html">关于我们</a></li>
                        <div id="marker"></div>
                    </ul>
                </nav>
            </div>
        </div>

        <!--内容1 -->
        <div class="center">

            <div class="slider" data-pos="0">
                <div class="slider__slides">
                    <div class="slider__slide">
                        <img src="img/home_slide_01.jpg" alt="">
                        <div class="content">
                            <div class="img">
                                <img src="img/logo_without_text.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider__dots">
                    <a href="#" class="slider__indicator"></a>
                    <a href="#" class="slider__dot" data-pos="0"></a>
                    <!--<a href="#" class="slider__dot" data-pos="1"></a>-->
                    <!--<a href="#" class="slider__dot" data-pos="2"></a>-->
                    <!--<a href="#" class="slider__dot" data-pos="3"></a>-->
                </div>
            </div>
        </div>
        <script type="text/javascript" src="./js/nav.js"></script>
    </div>
    <div class="section" id="section1">
        <div class="intro">
            <h1>我们的社团</h1>
            <div class="container">
                <a href="acm.html">
                    <div class="box">
                        <div class="box_content">
                            <h2>程序基础设计协会</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="img">
                            <img src="img/acm_logo.png" alt="">
                        </div>
                    </div>
                </a>

                <a href="acm.html">

                    <div class="box">
                        <div class="box_content">
                            <h2>ACM协会</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="img">
                            <img src="img/acm_logo.png" alt="">
                        </div>
                    </div>
                </a>

                <a href="bgs.html">

                    <div class="box">
                        <div class="box_content">
                            <h2>不甘社</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="img">
                            <img src="img/bgs_logo.jpg" alt="">
                        </div>
                    </div>
                </a>

                <a href="wkf.html">

                    <div class="box">
                        <div class="box_content">
                            <h2>微开发</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="img">
                            <img src="img/wkf_logo.png" alt="">
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="slide" id="slide1">
            <div class="intro">
                <h1>点到系统</h1>
                <div class="opus">
                    <a href="works.html">
                        <img src="img/works_01.jpg" alt="">
                    </a>
                    <div class="introduce">
                        <p>当学生输入验证码签到后，网络会被自动屏蔽，90分钟后才会自动开启，以防止学生上课玩手机</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide" id="slide2">
            <div class="intro">
                <h1>扫码寻物</h1>
                <div class="opus">
                    <a href="works.html">
                        <img src="img/works_02.png" alt="">
                    </a>
                    <div class="introduce">
                        <!--<p>当学生输入验证码签到后，网络会被自动屏蔽，90分钟后才会自动开启，以防止学生上课玩手机</p>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section3">
        <div class="foot">

            <div class="footer">
                <h2 class="title">了解我们，加入我们</h2>


                <div class="sepc">
                </div>

                <div class="footer_contain">
                    <div class="box">
                        <div><img src="img/warm.png"></div>
                        <h3>热情</h3>
                        <p>
                            我们的社团很热情，反正就是很热情。。不管怎么样都是很热情</p>
                    </div>

                    <div class="box">
                        <div><img src="img/tec.jpg"></div>
                        <h3>技术</h3>
                        <p>
                            技术大牛都在这里了喂，快来快来。带你装逼带你飞</p>
                    </div>

                    <div class="box">
                        <div><img src="img/team.jpg"></div>
                        <h3>团队</h3>
                        <p>
                            我们有很好的技术团队，不甘社，微开发。带你做项目带你走向人生巅峰</p>
                    </div>
                </div>
            </div>

            <div class="bottom">
                <div class="bottom_content">
                    <div class="left">
                        <div><img src="img/logo_without_text.png"></div>
                        <p>版权所有：北京理工大学珠海学院计算机科技协会</p>
                    </div>
                    <div class="right">
                        <div class="qr_code_box">
                            <div><img src="img/qq_qt_code.jpg"></div>
                            <p>2016级程序程基协会qq群</p>
                        </div>
                        <div class="qr_code_box">
                            <div><img src="img/wechat_qt_code.jpg"></div>
                            <p>计算机科技协会服务号</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>

</html>